<template>
  <div class="raw_material_prop">
    <one-title title="原材料属性设置" @refreshData="refresh">
      <div class="mes_btn">
        <disabled-btn
          v-btn-permission="'delete'"
          :judge="deleteJudge"
          iconClass="iconfont icon-btn_delete"
          btnText="删除"
          @judgeClick="handleDelete"></disabled-btn>
        <el-button
          v-btn-permission="'add'"
          type="success" @click="handleAdd">
          <i class="iconfont icon-btn_addnew"></i>
          新增
        </el-button>
      </div>
    </one-title>
    <div class="fixed_top_56">
      <mes-search-comp
        ref="mesSearch"
        :searchList="searchList"
        :searchResult="searchResult"
        :searchSeniorShow="false"
        @searchInfo="_info"></mes-search-comp>
      <div class="table_container">
        <el-table
          border
          stripe
          v-loading="isLoading"
          style="width: 100%"
          ref="mesTable"
          :data="rawMaterialProp"
          :max-height="tableMaxHeight"
          :row-class-name="({row}) => !selectData.some((item) => item.id === row.id) || 'line_selected'"
          @row-click="row => $refs.mesTable.toggleRowSelection(row)"
          @selection-change="handleSelectionChange"
          @sort-change="_sort">
          <el-table-column
            type="selection"
            fixed="left"
            width="40">
          </el-table-column>
          <el-table-column
            fixed="left"
            label="物料编码"
            sortable="custom"
            prop="number"
            show-overflow-tooltip
            min-width="100">
          </el-table-column>
          <el-table-column
            fixed="left"
            label="物料名称"
            show-overflow-tooltip
            sortable="custom"
            prop="name"
            min-width="100">
          </el-table-column>
          <el-table-column
            fixed="left"
            label="创建时间"
            sortable="custom"
            align="center"
            prop="templateCreateDate"
            min-width="160">
          </el-table-column>
          <el-table-column
            v-for="(item, index) in listNum"
            :key="index"
            :label="`字段${index + 1}`"
            show-overflow-tooltip
            min-width="80">
            <template slot-scope="scope">
              {{scope.row.template[index] || ''}}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <mes-pagination
        @updateData="init"
        :currentPage="listData.pageNo"
        :total="listData.count || 0"
        :pageSize="listData.pageSize">
      </mes-pagination>
    </div>
    <add-prop ref="addProp" @saveSuccess="init"></add-prop>
  </div>
</template>

<script>
import AddProp from './components/AddProp'

export default {
  name: 'RawMaterialProp',
  components: {
    AddProp
  },
  data() {
    return {
      searchList: [
        {prop: 'number', label: '物料编码', noForCol: true},
        {prop: 'name', label: '物料名称', noForCol: true},
      ],
      searchData: {}, // 搜索对象
      sortData: {}, // 排序对象
      selectData: [], // 行选中数据
      searchResult: NaN, // 搜索结果数
      isLoading: false, // 加载中
    }
  },
  computed: {
    // 列表数据
    listData() {
      return this.$store.state.rawMaterialProp.listData || {}
    },
    // 表格循环列表
    rawMaterialProp() {
      let list = this.listData.list || []
      list.map(item => {
        item.template = item.template.split(',')
      })
      return list
    },
    // 字段数量
    listNum() {
      let numArr = 0
      this.rawMaterialProp.map(item => {
        if (item.template.length > numArr) numArr = item.template.length
      })
      return numArr
    },
    // 删除判断
    deleteJudge() {
      if (!this.selectData.length) return {msg: '请选择需要删除的物料！'}
      return {msg: false}
    },
  },
  mounted() {
    this.init()
  },
  methods: {
    // 初始化
    init(page) {
      this.isLoading = true
      let pageObj = page || {
        pageNo: 1,
        pageSize: this.listData.pageSize || 15
      }
      this.$store.dispatch('saveData', {
        url: 'a/rawmaterialtemplate/rawMaterialTemplate/list',
        method: 'post',
        data: {
          pageNo: pageObj.pageNo,
          pageSize: pageObj.pageSize,
          query: this.searchData,
          sort: this.sortData
        },
        module: 'rawMaterialProp',
        state: 'listData'
      }).then(res => {
        if (Object.keys(this.searchData).length > 0) {
          this.searchResult = res.count
        } else {
          this.searchResult = NaN
        }
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 删除
    handleDelete() {
      this.confirmDelete().then(() => {
        let postData = {
          method: 'post',
          url: 'a/rawmaterialtemplate/rawMaterialTemplate/deleteBatch',
          data: {
            rawMaterialTemplateList: this.selectData.reduce((pre, cur) => [...pre, {id: cur.id}], [])
          },
          noCommit: true
        }
        this.$store.dispatch('saveData', postData).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功',
            duration: 1500,
            center: true
          })
          this.init(this.listData)
        })
      })
    },
    // 复选框
    handleSelectionChange(val) {
      this.selectData = val
    },
    // 打开新增弹框
    handleAdd() {
      this.$refs.addProp.openDialog()
    },
    // 查询
    _info(data) {
      this.searchData = data
      this.init()
    },
    // 刷新
    refresh() {
      this.$refs.mesSearch.clean()
      this.searchData = {}
      this.init()
    },
    // 排序
    _sort(obj) {
      this.sortData = this.$getSortOrder(obj)
      this.init()
    },
  }
}
</script>

<style scoped lang="less">

</style>
